<!DOCTYPE html>
<!--[if lt IE 7]>
<html class="no-js ie6" lang="en"> <![endif]-->
<!--[if IE 7]>
<html class="no-js ie7" lang="en"> <![endif]-->
<!--[if IE 8]>
<html class="no-js ie8" lang="en"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js" lang="en"> <!--<![endif]-->
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>ANJUKE框架说明会</title>
    <meta name="description" content="A jQuery library for modern HTML presentations">
    <meta name="author" content="Caleb Troughton">
    <meta name="viewport" content="width=1024, user-scalable=no">
    <!-- Core and extension CSS files -->
    <link rel="stylesheet" href="core/deck.core.css">
    <link rel="stylesheet" href="extensions/goto/deck.goto.css">
    <link rel="stylesheet" href="extensions/menu/deck.menu.css">
    <link rel="stylesheet" href="extensions/navigation/deck.navigation.css">
    <link rel="stylesheet" href="extensions/status/deck.status.css">
    <link rel="stylesheet" href="extensions/hash/deck.hash.css">
    <link rel="stylesheet" href="extensions/scale/deck.scale.css">
    <!-- Style theme. More available in /themes/style/ or create your own. -->
    <link rel="stylesheet" href="themes/style/neon.css">
    <!-- Transition theme. More available in /themes/transition/ or create your own. -->
    <link rel="stylesheet" href="themes/transition/horizontal-slide.css">
    <link rel="stylesheet" href="themes/style/ppt.css">
    <script src="js/modernizr.custom.js"></script>
</head>
<body class="deck-container">
<!-- Begin slides -->
<section class="slide" id="title-slide">
    <h1>ANJUKE框架说明会</h1>
    <h3>V仔</h3>
</section>

<section class="slide">
    <h2>一个页面有什么组成?</h2>
    <ul>
        <li class="slide"><h3>CSS</h3></li>
        <li class="slide"><h3>JS</h3></li>
        <li class="slide"><h3>图片</h3></li>
        <li class="slide"><h3>html</h3></li>
    </ul>
</section>

<section class="slide">
    <h2>安居客的页面如何组合的?</h2>
    <p><img src="bootstrap/pptimages/3/mylogin.jpg"/></p>
</section>
<section class="slide" id="pmt">
    <h2>神秘面纱:MVC是什么?</h2>
    <p style="float: right;"><img src="bootstrap/pptimages/3/v2flow.png"/></p>
    <p style="float: left;"><img src="bootstrap/pptimages/3/mvc.png"/></p>
</section>

<section class="slide">
    <h2>Page疑惑点</h2>
    <ul>
        <li class="slide"><h3>use_boundable_styles与use_styles</h3></li>
        <li class="slide"><h3>use_boundable_javascripts与use_javascripts</h3></li>
        <li class="slide"><h3>use_component</h3></li>
        <li class="slide"><h3>图片</h3></li>
    </ul>
</section>

<section class="slide">
    <h2>CSS配置注意点</h2>
    <ul>
        <li class="slide"><h3>CSS中加载图片</h3></li>
        <li class="slide"><h3>引用自己的CSS</h3></li>
        <li class="slide"><h3>引用别人的CSS</h3></li>
        <li class="slide"><h3>use_boundable_styles与use_styles有什么区别</h3></li>
    </ul>
</section>

<section class="slide">
    <h2>CSS如何配置(续)--CSS中加载图片</h2>
    <ul>
        <li class="slide">记住在CSS文件头部放入<\?php apf_require_class("PageHelper"); ?></li>
        <li class="slide">如何加载图片<\?php echo PageHelper::pure_static_url("/images/test.jpg");?></li>
        <li class="slide">静态资源(不变的)放在:http://projects.dev.anjuke.com/svn/sites/pages</li>
    </ul>
</section>

<section class="slide">
    <h2>CSS如何配置(续)--引用CSS</h2>
    <p>
      引用CSS主要记住路径就好了,为什么会有变量<h3>$path</h3>
        <img src="bootstrap/pptimages/3/css.jpg"/>
    </p>
</section>

<section class="slide">
    <h2>CSS如何配置(续)--CSS引入两种方法的区别</h2>
    <p>use_boundable_styles与use_styles有什么区别</p>
    <ul>
        <li class="slide">use_boundable_styles:把配置的多个CSS文件压缩成一个CSS文件减少HTTP请求和大小, 可能需要修改的</li>
        <li class="slide">use_styles:不对配置的CSS文件处理?好像没什么用这个方法</li>
    </ul>
</section>

<section class="slide">
    <h2>JS如何配置</h2>
    <ul>
        <li class="slide"><h3>引用自己的JS "pass"</h3></li>
        <li class="slide"><h3>引用别人的JS "pass"</h3></li>
        <li class="slide"><h3>use_boundable_javascripts与use_javascripts有什么区别</h3></li>
    </ul>
</section>

<section class="slide">
    <h2>JS如何配置(续)--JS引入两种方法的区别</h2>
    <p>use_boundable_styles和use_styles,use_styles主要用于加载不在本地的JS文件,所以才不压缩的</p>
    <img src="bootstrap/pptimages/3/js.jpg"/>
</section>

<section class="slide">
    <h2>Component CSS和JS如何配置</h2>
    <p>Component页面的JS和CSS往往没有加载,为什么?</p>
    <img src="bootstrap/pptimages/3/component.png"/>
</section>

<section class="slide">
    <h2>静态资源如何修改</h2>
    <p>图片被缓存了,怎么办?<h3 class="slide">没办法，重命名</h3></p>
</section>


<section class="slide">
    <h2>做一个独立的前端--写简单的php</h2>
    <p style="float:right;z-index: 9999;display: block;"><img src="bootstrap/pptimages/3/v2.jpg"/></p>
    <ul>
        <li class="slide"><h3>在route.php添加路由规则</h3></li>
        <li class="slide"><h3>写Controller php</h3></li>
        <li class="slide"><h3>写page php</h3></li>
        <li class="slide"><h3>写page phtml css js</h3></li>
    </ul>
</section>

<section class="slide">
    <h2>做一个独立的前端--自动化</h2>
    <p><img src="bootstrap/pptimages/3/robot.png"/></p>
</section>

<section class="slide">
    <h2>配置是不是很复杂</h2>
    <p>为什么框架把图片,CSS,JS配置搞的如此复杂?</p>
    <ul>
        <li class="slide"><h3>便于扩展</h3></li>
        <li class="slide"><h3>统一压缩和缓存</h3></li>
    </ul>
</section>

<section class="slide">
    <h2>测试环境</h2>
    <p style="float:right;z-index: 9999;display: block;"><img src="bootstrap/pptimages/3/ideliverpg.jpg"/></p>
    <ul>
        <li class="slide"><h3>pgpmtxxx</h3></li>
        <li class="slide"><h3>pgbugxxx</h3></li>
        <li class="slide"><h3>my.anjuke.test</h3></li>
        <li class="slide"><h3>PG如何更新图片</h3></li>
    </ul>
</section>


<section class="slide">
    <h2>仓库对应关系</h2>
    <ul>
        <li class="slide">site/anjuke-broker与_ajkrepopool/anjuke_feature</li>
        <li class="slide">site/ajk-broker与_ajkrepopool/ajk_feature</li>
        <li class="slide">haozu/haozu-site与_ajkrepopool/haozu_feature</li>
        <li class="slide">jinpu/jinpu-site与_ajkrepopool/jinpu_feature</li>
        <li class="slide">anjuke/ajk-memdian与_ajkrepopool/memdian_feature</li>
    </ul>
</section>


<section class="slide">
    <h1><p>掌声在哪里!!!<img width="300px" height="300px" src="bootstrap/pptimages/1/geili.gif"/></p></h1>
</section>
<section class="slide" id="over">
    <h1>
        The End
        <p>
            <img src="bootstrap/img/follow.jpeg"/>
        </p>
    </h1>
</section>
<!-- deck.navigation snippet -->
<a href="#" class="deck-prev-link" title="Previous" style="display: none;">&#8592;</a>
<a href="#" class="deck-next-link" title="Next" style="display: none;">&#8594;</a>
<!-- deck.status snippet -->
<p class="deck-status">
    <span class="deck-status-current"></span>
    /
    <span class="deck-status-total"></span>
</p>
<!-- deck.goto snippet -->
<form action="." method="get" class="goto-form">
    <label for="goto-slide">Go to slide:</label>
    <input type="text" name="slidenum" id="goto-slide" list="goto-datalist">
    <datalist id="goto-datalist"></datalist>
    <input type="submit" value="Go">
</form>

<!-- deck.hash snippet -->
<a href="." title="Permalink to this slide" class="deck-permalink">#</a>


<!-- Grab CDN jQuery, with a protocol relative URL; fall back to local if offline -->
<script src="js/jquery-1.7.2.min.js"></script>

<!-- Deck Core and extensions -->
<script src="core/deck.core.js"></script>
<script src="extensions/hash/deck.hash.js"></script>
<script src="extensions/menu/deck.menu.js"></script>
<script src="extensions/goto/deck.goto.js"></script>
<script src="extensions/status/deck.status.js"></script>
<script src="extensions/navigation/deck.navigation.js"></script>
<script src="extensions/scale/deck.scale.js"></script>
<script src="js/websocket.js"></script>
<!-- Initialize the deck -->
<script>
    $(function () {
        $.deck('.slide');
    });
</script>

</body>
</html>
